<!DOCTYPE html>
<html>
  <head>
    <title>d06.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<style>
  		.s1{
  			color:red;
  		}
  		.s2{
  			font-size:20px;
  		}
  	</style>
  	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  	<script type="text/javascript">
  		$(function(){
  			$('#a1').click(function(){
  				$('#d1').attr('style','color:red;font-size:30px;');
  				$('#d1').attr('class','s1');
  				$('#d1').addClass('s1');
  				$('#d1').addClass('s1 s2');
  				$('#d1').removeClass('s1');
  				$('#d1').toggleClass('s2');
  				alert($('#d1').hasClass('s1'));
  				$('#d1').css('font-style','italic');
  			});
  		});
  	</script>
  </head>
  <body>
  	<!-- 样式操作 -->
  	<!-- 
  		获取和设置：attr("class"," ")或者attr("style"," ");
  		追加：addClass('')
  		移除：removeClass('')或者
  			 removeClass('s1 s2')或者
  			 removeClass( )会删除所有样式
  		切换样式:toggleClass,有该样式就删除，没有就添加
  		是否有某个样式hasClass('')
  		读取css('')
  		设置css('','')
  		或者css({'':'','':''})设置多个样式
  	 -->
  	 <div id="d1">hello jQuery</div>
  	 <a href="javascript:;" id="a1">样式操作</a>  
  </body>
</html>
